<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>小俊食谱 首页</title>
		<link rel="icon" href="img/logo/logo.jpg" sizes="32*32">
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.sever {
				background-color: #f6f7f8;
				padding-top: 20px;
			}
			a{
				text-decoration: none;
				color: #000;
			}
			.center {
				width: 1100px;
				margin: 0 auto;
			}
			hr{
				margin: 0;
				border-top: 0;
			}
			.title {
				background-color: #fff;
			}

			.title_top_left a {
				display: block;
			}

			.title_top {
				display: flex;
				justify-content: space-between;
				height: 60px;
				width: 1100px;
				margin: 0 auto;
			}

			.title_top .title_top_left {
				display: flex;
				align-items: center;
			}

			.title_top .title_top-right .reg {
				display: block;
				background-color: #f4f4f4;
				border: 0;
				border-radius: 8px;
				height: 30px;
				width: 80px;
				font-size: 13px;
			}

			.title_top .title_top-right {
				display: flex;
				align-items: center;
			}

			.title_top_left .title_a {
				margin-left: 30px;
			}

			.title_top-right input {
				width: 150px;
				height: 30px;
				border: 0;
				background-color: #f4f4f4;
				border-radius: 10px;
				outline: none;
				padding-left: 5px;
				color: #757575;
				
			}
			
			#Select_Search a{
				display: inline-block;
				position: absolute;
				right: 5%;
				top: 50%;
				transform: translateY(-50%);
			}
			
			.title_top-right a img{
				width: 15px;
				line-height: 30px;
			}

			#Select_Search {
				border: 1px solid #f4f4f4;
				background-color: #f4f4f4;
				margin-right: 100px;
				border-radius: 10px;
				position: relative;
			}

			#head_select {
				font-size: 12px;
				height: 30px;
				background-color: #f4f4f4;
				border: 0;
				border-radius: 10px;
				outline: none;
				padding: 0 8px;
			}
			.title_low{
				display: flex;
				justify-content: space-between;
				height: 60px;
				width: 1100px;
				margin: 0 auto;
			}
			.title_low .title_low_left{
				display: flex;
				align-items: center;
			}
			.title_low .title_low_left a{
				display: block;	
				font-size: 14px;
			}
			
			.title_low .title_low_left a:not(:first-child){
				margin-left: 24px;
			}
			.title_low .title_low_right img{
				display: block;
				width: 16px;
				height: 16px;
			}
			.title_low .title_low_right div{
				display: flex;
				box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
				padding: 6px 8px;
				border: 1px solid #e2e8f0;
				border-radius: 5px;
				height: 25px;
				margin-top: 10px;
				align-items: center;
			}
			.title_low .title_low_right span{
				display: block;
				font-size: 13px;
				color: #469c51;
				margin-left: 5px;
			}
			.sever .center .big_pic{
				display: block;
			}
			.sever .center a .big_pic{
				width: 100%;
				border-radius: 10px;
			}
			.middle_search{
				margin-top: 65px;
			}
			.middle_search .title{
				display: block;
				font-size: 44px;
				text-align: center;
				margin-bottom: 40px;
				background-color: #f6f7f8;
			}
			.middle_search .into_search{
				text-align: center;
				position: relative;
			}
			.middle_search .into_search input{
				box-sizing: border-box;
				width: 600px;
				height: 50px;
				padding: 0 8px;
				border: 0;
				outline: none;
			}
			.middle_search .into_search a{
				display: inline-block;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 24%;
			}
			.middle_search .into_search a img{
				width: 25px;
			}
			#tips_reMen{
				display: block;
			}
			.middle_low_tips{
				display: flex;
				margin:10px 0 0 23%;
				font-size: 12px;
			}
			.middle_low_tips span{
				color: gray;
			}
			.middle_low_tips a:not(:first-child){
				margin-left: 10px;
			}
			.card{
				margin: 100px 0 0 0;
				border: rgba(0,0,0,0) 1px solid;
				overflow: hidden;
			}
			.card_1{
				width: 40%;
				height: 250px;
				display: flex;
				margin-right: 15px;
			}
			.card .card_lun{
				display: flex;
				width: 200%;
				/* transition: 1s; */
				animation: move1 40s infinite linear;
			}
			@keyframes move1{
				0%{
					transform: translate(0);
				}
				19%{
					transform: translate(0);
				}
				20%{
					transform: translate(-555px);
				}
				39%{
					transform: translate(-555px);
				}
				40%{
					transform: translate(-1100px);
				}
				59%{
					transform: translate(-1100px);
				}
				60%{
					transform: translate(-1665px);
				}
				79%{
					transform: translate(-1665px);
				}
				80%{
					transform: translate(-2200px);
				}
				99%{
					transform: translate(-2200px);
				}
				100%{
					transform: translate(-2775px);
				}
			}
			.card a{
				display: block;
			}
			.card_1 a img{
				display: block;
				height: 100%;
				border-radius: 10px 0 0 10px;
			}
			.card_right{
				background-color: #fff;
				width: 355px;
				height: 250px;
				border-radius: 0 10px 10px 0;
			}
			.card_right_top .title{
				display: block;
				margin: 16px 20px;
				height: 60px;
			}
			.card_right_top .card_new{
				box-sizing: border-box;
				margin: 0 20px;
				padding-bottom: 20px;
				display: flex;
				justify-content: space-between;
			}
			.card_right_top .card_new span,.card_right_top .card_new a{
				display: block;
				color: #bcbcbc;
				font-size: 12px;
			}
			.card_right_bottom{
				box-sizing: border-box;
				height: 125px;
				/* padding: 16px 0; */
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
			}
			.card_right_bottom .lit img,.card_right_bottom .lit a{
				display: block;
			}
			.card_right_bottom .lit img{
				width: 20px;
				border-radius: 10px;
				margin-right: 5px;
			}
			.card_right_bottom .lit a{
				font-size: 14px;
			}
			.card_right_bottom .lit{
				display: flex;
				padding: 0 20px;
			}
			.today{
				margin-top: 100px;
			}
			.today .today_all{
				margin-top: 20px;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
			.today .today_all .today_card{
				width: 24%;
				background-color: #fff;
				margin-bottom: 16px;
				border-radius: 10px;
			}
			.today .today_all .today_card a{
				display: block;
			}
			.today .today_all .today_card a img{
				display: block;
				width: 100%;
				border-radius: 10px 10px 0 0;
			}
			.today .today_all .today_card h3{
				margin: 11px 16px 20px;
				font-size: 15px;
			}
			.today .today_all .today_card h3 a{
				display: inline-block;
			}
			
			/* ******** */
			.new{
				margin-top: 100px;
				padding-bottom: 50px;
			}
			.new .new_all{
				margin-top: 20px;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
			.new .new_all .new_card{
				width: 24%;
				background-color: #fff;
				margin-bottom: 16px;
				border-radius: 10px;
			}
			.new .new_all .new_card a{
				display: block;
			}
			.new .new_all .new_card a img{
				display: block;
				width: 100%;
				border-radius: 10px 10px 0 0;
			}
			.new .new_all .new_card h3{
				margin: 11px 16px 20px;
				font-size: 15px;
			}
			.new .new_all .new_card h3 a{
				display: inline-block;
			}
			.tail{
				width: 1100px;
				margin: 0 auto;
				padding: 30px 0;
				display: flex;
				justify-content: space-between;
			}
			.tail p{
				font-size: 13px;
				margin: 10px;
			}
			.tail img{
				display: block;
				width: 100px;
				padding-right: 50px;
			}
			
		</style>
	</head>
	<body>
		<!-- 网页导航栏 -->
		<div id="title" class="title">
			<div id="title_top" class="title_top">
				<div id="title_top_left" class="title_top_left">
					<a href="#">
						<h2>小俊食谱中心</h2>
					</a>
					<a href="#" class="title_a">食谱专题</a>
					<a href="#" class="title_a">口味分类</a>
					<a href="#" class="title_a">加入美食群</a>
				</div>
				<div id="title_top_right" class="title_top-right">
					<div id="Select_Search">
						<select id="head_select">
							<option value="wenZhang">文章</option>
							<option value="yongHu">用户</option>
							<option value="wenDang">文档</option>
						</select>
						<input type="search" placeholder="搜索" class="search">
						<a href="#"><img src="./img/spirit/search.png" alt=""></a>
					</div>
					<button class="reg"><a href="MS_product/public/login.html">登录/注册</a></button>
				</div>
			</div>
			<hr>
			<div id="title_low" class="title_low">
				<div id="title_low_left" class="title_low_left">
					<a href="#" id="head_list_1" style="color: #469c51;">全部</a>
					<a href="breakfast.html" id="head_list_2">早餐</a>
					<a href="#" id="head_list_3">烘焙甜品</a>
					<a href="#" id="head_list_4">鸡鸭禽类</a>
					<a href="#" id="head_list_5">猪牛羊肉</a>
					<a href="#" id="head_list_6">海鲜水产</a>
					<a href="#" id="head_list_7">蔬食</a>
					<a href="#" id="head_list_8">小炒</a>
					<a href="#" id="head_list_9">主食</a>
					<a href="#" id="head_list_10">例汤</a>
					<a href="#" id="head_list_11">中式面点</a>
					<a href="#" id="head_list_12">西餐</a>
					<a href="#" id="head_list_13">果汁饮品</a>
					<a href="#" id="head_list_14">卤味酱料</a>
				</div>
				<div id="title_low_right" class="title_low_right">
					<a href="add.html">
						<div>
							<img src="./img/spirit/Pens.png">
							<span>写菜谱</span>
						</div>
						
						<!-- <input type="button" value="写菜谱" id="ceshi_btn"> -->
					</a>
				</div>
			</div>
		</div>
		<div class="sever" id="sever">
			<div class="center">
				<!-- 中间大图 -->
				<a href="#" class="big"><img src="./img/bigPic/big.jpg" class="big_pic"></a>
				<!-- 搜索食谱 -->
				<div id="middle_search" class="middle_search">
					<span class="title">搜索食谱</span>
					<div class="into_search">
						<input type="text" placeholder="直接搜索你想要的食谱">
						<a href="#"><img src="img/spirit/search.png"></a>
					</div>
					<div id="middle_low_tips" class="middle_low_tips">
						<span id="tips_reMen">热门搜索：</span>
						<a href="#" class="tips" id="tips_qiFeng">戚风</a>
						<a href="#" class="tips" id="tips_niuRou">牛肉</a>
						<a href="#" class="tips" id="tips_jiZhua">鸡爪</a>
						<a href="#" class="tips" id="tips_manTou">馒头</a>
					</div>
				</div>
				<!-- 轮播图卡片 -->
				<div class="card">
					<div class="card_lun">
						<!-- 卡片一 -->
						<div class="card_1">
							<a href="#"><img src="img/lunBo/lunBo_1.jpeg"></a>
							<div class="card_right">
								<div class="card_right_top">
									<a href="#" class="title"><h2>宝宝辅食</h2></a>
									<div class="card_new">
										<span>更新中……</span>
										<a href="#">前往</a>
									</div>
								</div>
								<hr>
								<div class="card_right_bottom">
									<div class="lit">
										<img src="img/LitlePic/xiaotu_4.jpg">
										<a href="#">糟皮麸松糕</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_10.jpg">
										<a href="#">婴儿饼干</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_13.jpg">
										<a href="#">鸡肉豆腐汉堡排</a>
									</div>
								</div>
							</div>
						</div>
						<!-- 卡片二 -->
						<div class="card_1">
							<a href="#"><img src="img/lunBo/lunBo_4.jpeg"></a>
							<div class="card_right">
								<div class="card_right_top">
									<a href="#" class="title"><h2>生酮专辑</h2></a>
									<div class="card_new">
										<span>更新中……</span>
										<a href="#">前往</a>
									</div>
								</div>
								<hr>
								<div class="card_right_bottom">
									<div class="lit">
										<img src="img/LitlePic/xiaotu_12.jpg">
										<a href="#">酱烧竹蒟蒻</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_8.jpg">
										<a href="#">双笋炒豆皮</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_11.jpg">
										<a href="#">金沙苦瓜</a>
									</div>
								</div>
							</div>
						</div>
						<!-- 卡片三 -->
						<div class="card_1">
							<a href="#"><img src="img/lunBo/lunBo_3.jpeg"></a>
							<div class="card_right">
								<div class="card_right_top">
									<a href="#" class="title"><h2>汽锅食谱</h2></a>
									<div class="card_new">
										<span>更新中……</span>
										<a href="#">前往</a>
									</div>
								</div>
								<hr>
								<div class="card_right_bottom">
									<div class="lit">
										<img src="img/LitlePic/xiaotu_3.jpg">
										<a href="#">汽锅花旗参鸽子汤</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_13.jpg">
										<a href="#">玉菇豆腐鱼骨汤</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_2.jpg">
										<a href="#">【荐】珍珠翡翠白玉汤</a>
									</div>
								</div>
							</div>
						</div>
						<!-- 卡片四 -->
						<div class="card_1">
							<a href="#"><img src="img/lunBo/lunBo_5_1.jpg"></a>
							<div class="card_right">
								<div class="card_right_top">
									<a href="#" class="title"><h2>基础入门</h2></a>
									<div class="card_new">
										<span>更新中……</span>
										<a href="#">前往</a>
									</div>
								</div>
								<hr>
								<div class="card_right_bottom">
									<div class="lit">
										<img src="img/LitlePic/xiaotu_14.jpg">
										<a href="#">牛油果奶昔</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_7.jpg">
										<a href="#">番茄紫菜蛋花汤</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_6.jpg">
										<a href="#">玉米汁</a>
									</div>
								</div>
							</div>
						</div>
						<!-- 卡片五 -->
						<div class="card_1">
							<a href="#"><img src="img/lunBo/lunBo_2.jpeg"></a>
							<div class="card_right">
								<div class="card_right_top">
									<a href="#" class="title"><h2>养身特辑</h2></a>
									<div class="card_new">
										<span>更新中……</span>
										<a href="#">前往</a>
									</div>
								</div>
								<hr>
								<div class="card_right_bottom">
									<div class="lit">
										<img src="img/LitlePic/xiaotu_1.jpg">
										<a href="#">秋梨膏</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_5.jpg">
										<a href="#">阿胶糕</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_9.jpg">
										<a href="#">小吊梨汤</a>
									</div>
								</div>
							</div>
						</div>
						<!-- ************* -->
						<div class="card_1">
							<a href="#"><img src="img/lunBo/lunBo_1.jpeg"></a>
							<div class="card_right">
								<div class="card_right_top">
									<a href="#" class="title"><h2>宝宝辅食</h2></a>
									<div class="card_new">
										<span>更新中……</span>
										<a href="#">前往</a>
									</div>
								</div>
								<hr>
								<div class="card_right_bottom">
									<div class="lit">
										<img src="img/LitlePic/xiaotu_4.jpg">
										<a href="#">糟皮麸松糕</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_10.jpg">
										<a href="#">婴儿饼干</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_13.jpg">
										<a href="#">鸡肉豆腐汉堡排</a>
									</div>
								</div>
							</div>
						</div>
						<!-- 卡片二 -->
						<div class="card_1">
							<a href="#"><img src="img/lunBo/lunBo_4.jpeg"></a>
							<div class="card_right">
								<div class="card_right_top">
									<a href="#" class="title"><h2>生酮专辑</h2></a>
									<div class="card_new">
										<span>更新中……</span>
										<a href="#">前往</a>
									</div>
								</div>
								<hr>
								<div class="card_right_bottom">
									<div class="lit">
										<img src="img/LitlePic/xiaotu_12.jpg">
										<a href="#">酱烧竹蒟蒻</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_8.jpg">
										<a href="#">双笋炒豆皮</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_11.jpg">
										<a href="#">金沙苦瓜</a>
									</div>
								</div>
							</div>
						</div>
						<!-- 卡片三 -->
						<div class="card_1">
							<a href="#"><img src="img/lunBo/lunBo_3.jpeg"></a>
							<div class="card_right">
								<div class="card_right_top">
									<a href="#" class="title"><h2>汽锅食谱</h2></a>
									<div class="card_new">
										<span>更新中……</span>
										<a href="#">前往</a>
									</div>
								</div>
								<hr>
								<div class="card_right_bottom">
									<div class="lit">
										<img src="img/LitlePic/xiaotu_3.jpg">
										<a href="#">汽锅花旗参鸽子汤</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_13.jpg">
										<a href="#">玉菇豆腐鱼骨汤</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_2.jpg">
										<a href="#">【荐】珍珠翡翠白玉汤</a>
									</div>
								</div>
							</div>
						</div>
						<!-- 卡片四 -->
						<div class="card_1">
							<a href="#"><img src="img/lunBo/lunBo_5_1.jpg"></a>
							<div class="card_right">
								<div class="card_right_top">
									<a href="#" class="title"><h2>基础入门</h2></a>
									<div class="card_new">
										<span>更新中……</span>
										<a href="#">前往</a>
									</div>
								</div>
								<hr>
								<div class="card_right_bottom">
									<div class="lit">
										<img src="img/LitlePic/xiaotu_14.jpg">
										<a href="#">牛油果奶昔</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_7.jpg">
										<a href="#">番茄紫菜蛋花汤</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_6.jpg">
										<a href="#">玉米汁</a>
									</div>
								</div>
							</div>
						</div>
						<!-- 卡片五 -->
						<div class="card_1">
							<a href="#"><img src="img/lunBo/lunBo_2.jpeg"></a>
							<div class="card_right">
								<div class="card_right_top">
									<a href="#" class="title"><h2>养身特辑</h2></a>
									<div class="card_new">
										<span>更新中……</span>
										<a href="#">前往</a>
									</div>
								</div>
								<hr>
								<div class="card_right_bottom">
									<div class="lit">
										<img src="img/LitlePic/xiaotu_1.jpg">
										<a href="#">秋梨膏</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_5.jpg">
										<a href="#">阿胶糕</a>
									</div>
									<div class="lit">
										<img src="img/LitlePic/xiaotu_9.jpg">
										<a href="#">小吊梨汤</a>
									</div>
								</div>
							</div>
						</div>
						<!-- ****************** -->
					</div>
				</div>
				<!-- 今日推荐 -->
				<div class="today">
					<h2>今日推荐</h2>
					<div class="today_all">
						<div class="today_card">
							<a href="#"><img src="img/today/today_1.jpeg" id="today_card_href-1"></a>
							<h3><a href="#" id="today_card_name-1">香煎肉饼</a></h3>
						</div>
						<div class="today_card">
							<a href="#"><img src="img/today/today_2.jpg" id="today_card_href-2"></a>
							<h3><a href="#" id="today_card_name-2">可可慕斯冰淇淋</a></h3>
						</div>
						<div class="today_card">
							<a href="#"><img src="img/today/today_3.jpg" id="today_card_href-3"></a>
							<h3><a href="#" id="today_card_name-3">消暑绿豆粥</a></h3>
						</div>
						<div class="today_card">
							<a href="#"><img src="img/today/today_4.jpg" id="today_card_href-4"></a>
							<h3><a href="#" id="today_card_name-4">海鲜汤</a></h3>
						</div>
						<div class="today_card">
							<a href="#"><img src="img/today/today_5.jpg" id="today_card_href-5"></a>
							<h3><a href="#" id="today_card_name-5">五谷炒饭</a></h3>
						</div>
						<div class="today_card">
							<a href="#"><img src="img/today/today_6.jpeg" id="today_card_href-6"></a>
							<h3><a href="#" id="today_card_name-6">香草烤鸡</a></h3>
						</div>
						<div class="today_card">
							<a href="#"><img src="img/today/today_7.jpg" id="today_card_href-7"></a>
							<h3><a href="#" id="today_card_name-7">汤面蛋糕卷</a></h3>
						</div>
						<div class="today_card">
							<a href="#"><img src="img/today/today_8.jpg" id="today_card_href-8"></a>
							<h3><a href="#" id="today_card_name-8">芝麻一口酥</a></h3>
						</div>
					</div>
				</div>
				<!-- 最新食谱 -->
				<div class="new">
					<h2>最新食谱</h2>
					<div class="new_all">
						<div class="new_card">
							<a href="#"><img src="img/new/new_1.jpg" id="new_card_href-1"></a>
							<h3><a href="#" id="new_card_name-1">黑三剁</a></h3>
						</div>
						<div class="new_card">
							<a href="#"><img src="img/new/new_2.jpg" id="new_card_href-2"></a>
							<h3><a href="#" id="new_card_name-2">臊子面</a></h3>
						</div>
						<div class="new_card">
							<a href="#"><img src="img/new/new_3.jpg" id="new_card_href-3"></a>
							<h3><a href="#" id="new_card_name-3">京酱肉丝</a></h3>
						</div>
						<div class="new_card">
							<a href="#"><img src="img/new/new_4.jpg" id="new_card_href-4"></a>
							<h3><a href="#" id="new_card_name-4">糖炒栗子</a></h3>
						</div>
						<div class="new_card">
							<a href="#"><img src="img/new/new_5.jpg" id="new_card_href-5"></a>
							<h3><a href="#" id="new_card_name-5">西洋菜猪骨汤</a></h3>
						</div>
						<div class="new_card">
							<a href="#"><img src="img/new/new_6.jpg" id="new_card_href-6"></a>
							<h3><a href="#" id="new_card_name-6">干蒸烧卖</a></h3>
						</div>
						<div class="new_card">
							<a href="#"><img src="img/new/new_7.jpg" id="new_card_href-7"></a>
							<h3><a href="#" id="new_card_name-7">炒双脆</a></h3>
						</div>
						<div class="new_card">
							<a href="#"><img src="img/new/new_8.jpg" id="new_card_href-8"></a>
							<h3><a href="#" id="new_card_name-8">川味魔芋烧鸭</a></h3>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部备案号 -->
		<div class="tail">
			<div class="last">
				<p>微信号:a15803260331</p>
				<p>个人内部学习使用项目，如有参考需求，可添加微信</p>
				<p>备案号 © 预留位置</p>
			</div>
			<img src="img/WeChat/WeChat.jpg">
		</div>
		<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
		<script>
			window.onload = function(){
				let xhr_1 = new XMLHttpRequest()
				xhr_1.open('GET','/v2/f/today')
				xhr_1.onload = function(){
					let data = JSON.parse(xhr_1.responseText)
					var card_1_img = document.getElementById('today_card_href-1') 
					card_1_img.setAttribute('src',`${data[0].fpic}`)
					var card_1_a = document.getElementById('today_card_name-1')
					card_1_a.innerHTML = `${data[0].fname}`
					
					var card_2_img = document.getElementById('today_card_href-2')
					card_2_img.setAttribute('src',`${data[1].fpic}`)
					var card_2_a = document.getElementById('today_card_name-2')
					card_2_a.innerHTML = `${data[1].fname}`
					
					var card_3_img = document.getElementById('today_card_href-3')
					card_3_img.setAttribute('src',`${data[2].fpic}`)
					var card_3_a = document.getElementById('today_card_name-3')
					card_3_a.innerHTML = `${data[2].fname}`
					
					var card_4_img = document.getElementById('today_card_href-4')
					card_4_img.setAttribute('src',`${data[3].fpic}`)
					var card_4_a = document.getElementById('today_card_name-4')
					card_4_a.innerHTML = `${data[3].fname}`
					
					var card_5_img = document.getElementById('today_card_href-5')
					card_5_img.setAttribute('src',`${data[4].fpic}`)
					var card_5_a = document.getElementById('today_card_name-5')
					card_5_a.innerHTML = `${data[4].fname}`
					
					var card_6_img = document.getElementById('today_card_href-6')
					card_6_img.setAttribute('src',`${data[5].fpic}`)
					var card_6_a = document.getElementById('today_card_name-6')
					card_6_a.innerHTML = `${data[5].fname}`
					
					var card_7_img = document.getElementById('today_card_href-7')
					card_7_img.setAttribute('src',`${data[6].fpic}`)
					var card_7_a = document.getElementById('today_card_name-7')
					card_7_a.innerHTML = `${data[6].fname}`
					
					var card_8_img = document.getElementById('today_card_href-8')
					card_8_img.setAttribute('src',`${data[7].fpic}`)
					var card_8_a = document.getElementById('today_card_name-8')
					card_8_a.innerHTML = `${data[7].fname}`
				}
				xhr_1.send()
				
				let xhr_2 = new XMLHttpRequest()
				xhr_2.open('GET','/v2/f/new')
				xhr_2.onload = function(){
					let data = JSON.parse(xhr_2.responseText)
					var card_1_img = document.getElementById('new_card_href-1') 
					card_1_img.setAttribute('src',`${data[0].fpic}`)
					var card_1_a = document.getElementById('new_card_name-1')
					card_1_a.innerHTML = `${data[0].fname}`
					
					var card_2_img = document.getElementById('new_card_href-2')
					card_2_img.setAttribute('src',`${data[1].fpic}`)
					var card_2_a = document.getElementById('new_card_name-2')
					card_2_a.innerHTML = `${data[1].fname}`
					
					var card_3_img = document.getElementById('new_card_href-3')
					card_3_img.setAttribute('src',`${data[2].fpic}`)
					var card_3_a = document.getElementById('new_card_name-3')
					card_3_a.innerHTML = `${data[2].fname}`
					
					var card_4_img = document.getElementById('new_card_href-4')
					card_4_img.setAttribute('src',`${data[3].fpic}`)
					var card_4_a = document.getElementById('new_card_name-4')
					card_4_a.innerHTML = `${data[3].fname}`
					
					var card_5_img = document.getElementById('new_card_href-5')
					card_5_img.setAttribute('src',`${data[4].fpic}`)
					var card_5_a = document.getElementById('new_card_name-5')
					card_5_a.innerHTML = `${data[4].fname}`
					
					var card_6_img = document.getElementById('new_card_href-6')
					card_6_img.setAttribute('src',`${data[5].fpic}`)
					var card_6_a = document.getElementById('new_card_name-6')
					card_6_a.innerHTML = `${data[5].fname}`
					
					var card_7_img = document.getElementById('new_card_href-7')
					card_7_img.setAttribute('src',`${data[6].fpic}`)
					var card_7_a = document.getElementById('new_card_name-7')
					card_7_a.innerHTML = `${data[6].fname}`
					
					var card_8_img = document.getElementById('new_card_href-8')
					card_8_img.setAttribute('src',`${data[7].fpic}`)
					var card_8_a = document.getElementById('new_card_name-8')
					card_8_a.innerHTML = `${data[7].fname}`
				}
				xhr_2.send()
				
				// ceshi_btn.onclick = function(){
				// 	var sever = document.getElementById("sever")
				// 	sever.style = `display:none`
				// }
				head_list_1.onclick = function(){
					var sever = document.getElementById("sever")
					sever.style = `display:block`
				}
			}
		</script>
	</body>
</html>
